<template>
    <div class="has-padding-sm">

        <div class="heading outline">
            <div class="title">
                <i class="icon-list"></i>
                {{this.$t('records', {
                s1: (restResult.meta.extraData.currentPage - 1) * restResult.meta.extraData.perPage,
                s2: (restResult.meta.extraData.currentPage - 1) * restResult.meta.extraData.perPage +
                restResult.meta.extraData.perPage,
                s3: restResult.meta.extraData.totalCount
                })}}
            </div>
            <nav class="nav">
                <a class="gray rounded" title="refresh" @click="handleRefresh()"><i class="icon icon-refresh"></i></a>

                <slot name="panel-action">
                    <a class="btn danger text-tint rounded" @click="handleMultipleDelete()"><i
                            class="icon icon-trash"></i>{{this.$t('delete')}}</a>

                    <a class="btn success text-tint rounded" :href="editRoute">
                        <i class="icon icon-plus-sign"></i>{{this.$t('create')}}
                    </a>
                </slot>
            </nav>
        </div>
        <div class="clearfix"></div>

        <div class="overflow">
            <table class="table bordered">
                <thead>
                <tr>
                    <th class="checkbox-column"><input type="checkbox" :checked="selectedAllState"
                                                       @click="handleCheck(0)"/></th>
                    <th v-for="item in restResult.labels" :key="item.index">{{item}}</th>
                    <th>{{this.$t('operation')}}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in restResult.data" :key="data.index">
                    <td><input name="ids[]" type="checkbox" :value="data.id" @click="handleCheck(data.id)"
                               :checked="isSelected(data.id)"/></td>
                    <slot name="td" v-bind:td="data">
                        <td v-for="(item, index) in data" :key="index">
                            {{item}}
                        </td>
                    </slot>
                    <slot name="grid-action" v-bind:td="data">
                        <td>
                            <a class="btn" title="edit" :href="editRoute+'?id='+data.id">
                                <i class="icon icon-pencil"></i>
                            </a>
                            <!--                        <router-link class="btn" title="edit" :to="{path: editAction, params: {id: data.id}}">-->
                            <!--                            <i class="icon icon-pencil"></i>-->
                            <!--                        </router-link>-->
                            <a class="btn" title="delete" @click="handleDelete(data.id)"><i class="icon icon-trash"></i></a>
                        </td>
                    </slot>
                </tr>
                </tbody>
                <tfoot>
                <slot name="tfoot">

                </slot>
                </tfoot>


                <Loading ref="loading"></Loading>

                <Toast ref="toast"></Toast>

                <Dialog ref="dialog"></Dialog>

            </table>
        </div>

        <pagination
                :extraData="restResult.meta.extraData"
                @pageTo="handlePageTo"
        />

    </div>
</template>
<script>
    import Pagination from "./Pagination";
    import Loading from "@/components/Loading";
    import Toast from "@/components/Toast";
    import Dialog from "@/components/Dialog";
    import request from "@/libs/request";

    export default {
        name: 'GridView',
        components: {Toast, Pagination, Loading, Dialog},
        props: {
            indexAction: '',
            deleteAction: '',
            editRoute: '',
        },
        data() {
            return {
                restResult: {
                    // data: [],
                    // labels: [],
                    // sortParam: '',
                    // pageParam: '',
                    meta: {
                        extraData: {
                            // totalCount: 0,
                            // pageCount: 0,
                            // currentPage: 0,
                            // perPage: 0,
                        },
                    }
                },
                selectedIds: [],
                selectedAllState: false,
                page: 0,
                per: 20,
            }
        },
        mounted() {
            this.getIndex();
        },
        methods: {
            async getIndex() {
                this.setDefaultSelect();
                let that = this;

                this.$refs.loading.start();
                return new Promise(((resolve, reject) => {
                    request({
                        url: that.indexAction,
                        method: 'get',
                        params: {page: that.page, per: that.per},
                    }).then(response => {
                        that.$refs.loading.stop();
                        that.restResult = response;
                    }).catch(error => {
                        that.$refs.loading.stop();
                        that.$refs.toast.show();
                    })
                }))

            },
            setDefaultSelect() {
                this.selectedIds = [];
                this.selectedAllState = false;
            },
            handleRefresh() {
                this.getIndex();
            },
            handleEdit(id) {
                // this.$emit('edit', id);
            },
            handleDelete(id) {
                this.selectedIds.push(id);
                this.requestDelete();
            },
            handleMultipleDelete(id) {
                if (this.selectedIds.length === 0) {
                    this.$refs.toast.show(this.$t('no items selected'));
                    return;
                }
                this.requestDelete();
            },
            async requestDelete() {
                let that = this;
                this.$refs.dialog.handleConfirm().then(() => {
                    new Promise(((resolve, reject) => {
                        request({
                            url: that.deleteAction,
                            method: 'post',
                            data: {ids: that.selectedIds},
                        }).then(response => {
                            that.getIndex();
                            that.$refs.toast.show(response.meta.msg);
                        }).catch(error => {
                            that.$refs.toast.show();
                        })
                    }))
                });
            },
            handlePageTo(pageCount) {
                this.page = pageCount;
                this.getIndex();
            },
            handleCheck(id) {
                let that = this;
                if (id === 0) {
                    if (!this.selectedAllState) {
                        this.restResult.data.forEach(function (item) {
                            that.selectedIds.push(item.id);
                        })
                    } else {
                        this.selectedIds = [];
                    }
                    this.selectedAllState = !this.selectedAllState;
                    return;
                }
                let index = this.selectedIds.indexOf(id);
                index === -1 ? this.selectedIds.push(id) : this.selectedIds.splice(index, 1);
            },
            isSelected(id) {
                return this.selectedIds.indexOf(id) !== -1;
            },
        }
    }
</script>
<style scoped>
    .outline {
        border-bottom: 0;
    }

    .nav > a {
        height: 1.5rem;
        margin-right: .25rem;
    }

    .overflow {
        overflow: scroll;
    }

    .table.bordered tbody tr td {
        padding: 0 0.5rem 0 0.5rem;
        /*min-height: 40px;*/
        line-height: 1.5rem;
        height: 1.5rem;
        overflow-wrap: break-word;
        word-break: break-all;
        /*min-width: 10rem;*/
        max-width: 10rem;
    }

    .table.bordered tfoot td {
        padding-left: .25rem;
    }

    .table th {
        opacity: 1;
        background: rgba(0, 0, 0, .2)
    }

    /*.table th:not(:first-child) {*/
    /*    min-width: 10rem;*/
    /*    max-width: 10rem;*/
    /*}*/

    .table th:first-child {
        background-color: #fff;
    }

    tr:hover {
        background: none !important;
    }

    tr:hover td {
        background: none !important;
    }

    .checkbox-column {
        width: 1rem;
        text-align: center;
    }

    td > input {
        /*width: .75rem;*/
        /*height: .75rem;*/
        vertical-align: sub;
    }
</style>